<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
    <title>微电影</title>
    <link rel="shortcut icon" href="{{ static_url('base/images/logo.png') }}">
    <link rel="stylesheet" href="{{ static_url('base/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ static_url('base/css/bootstrap-movie.css') }}">
    <link rel="stylesheet" href="{{ static_url('base/css/animate.css') }}">
    <link rel="stylesheet" href="{{ static_url('base/css/mycss.css') }}">
    <style>
        .navbar-brand>img {
            display: inline;
        }
        .media{
            padding:3px;
                    border: 1px solid #ccc
        }
        .container {
            padding-right: 15px;
            padding-left: 15px;
            width: 98%;
            /* margin-right: auto; */
            /* margin-left: auto; */
        }
        .row {
            padding-right: 15px;
            padding-left: 15px;
            /*margin: 0 140px;*/
        }
        .row2 {
            padding-right: 15px;
            padding-left: 15px;
            margin: 0 140px;
        }
        .setarea{
            margin: 0 -30px;
        }
        .col-md-3 {
            /*width: 33%;*/
            /*min-height: 290px;*/
        }
        .sort-btn{
            width:46px;
            height:36px;
            border-radius: 11px;
            background-position:0px 0px;
            background-color: #abbcc2;
            margin: 2px;
            position:relative;
            color:white;
            z-index:2;
            cursor:pointer;
          }
          .sort-btn:hover{
            background-position:0px 54px;
          }
          .sort-btn.active{
            background: rgba(6, 178, 6, 0.85);
          }
          .sort-btn.highlight{
            background: rgb(255,2,2);
          }
          .author-btn{
            color: #ff9900;
              position: relative;
              text-align: left;
              border-radius: 2px;
              background: #1b6d85;
              padding: 2px 2px 2px 4px;
              margin: 3px 3px;
              cursor:pointer;
              width: 150px;
          }
          .selected{
              background: antiquewhite;
          }

    </style>
    {% block css %}{% end %}
</head>

<body style="
    background-color: #292929;
">
<!--导航-->
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: #292929;border: 1px solid #393939;">
    <div class="container">
        <!--小屏幕导航按钮和logo-->
        <div class="navbar-header">
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="/home" class="navbar-brand" style="width:250px;">
                <img src="{{ static_url('base/images/logo.png') }}" style="height:30px;">&nbsp;微电影
            </a>
        </div>
        <!--小屏幕导航按钮和logo-->
        <!--导航-->
        <div class="navbar-collapse collapse">
            
            <form class="navbar-form navbar-left" role="m3u8" style="margin-top:18px;position: relative;/* left: -100px; */">
                <div class="form-group input-group">
                    <input type="text" class="form-control" autocomplete="off" placeholder="请输入流地址" id="m3u8_movie">
                    <span class="input-group-btn">
                        <a class="btn btn-default" id="do_m3u8">播放</a>
                    </span>
                </div>
            </form>
            <form id="search" action="#" method="GET" onsubmit="return do_search();" class="navbar-form navbar-left" role="m3u8" style="margin-top:18px;position: relative;">
                <div class="form-group input-group" style="margin-left: 40px;">
                    <input type="text"  name="area" value="0" hidden>
                    <input type="text" name='kwards' class="form-control" autocomplete="off" placeholder="關鍵字" id="search_movie">
                    <span class="input-group-btn">
                        <input type="submit" value="搜索" class="btn btn-default"></a>
                    </span>
                </div>
            </form>
            <ul class="nav navbar-nav navbar-right">
            </ul>
        </div>
        <!--导航-->
    </div>
</nav>
<!--导航-->
<!--内容-->
<div class="container" style="margin-top:76px">
    {% block content %}{% end %}
    {% block set %}{% end %}
</div>
<!--内容-->
<div class="container" style="margin-top:10px; float: left;position: absolute;top: 74px;width: 166px;">
    <!-- {% block set %}{% end %} -->
</div>
<!-- 按钮 -->
<div class="sort-list" id="sort-list" style="display: none;justify-content: space-evenly;flex-direction:column;position: fixed;top:80px;right: 2px;width: 60px;">
  <div class="sort-btn" id="sort-area" value="" style="padding-left: 6px;font-size: 15px;padding-top: 7px;">Area</div>
  <div class="sort-btn" id="sort-author" value="" style="padding-left: 2px;font-size: 13px;padding-top: 8px;">Author</div>
  <div class="sort-btn" id="sort-hv" value="" style="padding-left: 2px;font-size: 15px;padding-top: 6px;"></div>
</div>
<!-- 弹窗 -->
<div class="modal fade in showpop" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog" style="z-index: 1;width: 60%;position: relative;">
      <div class="modal-content">
        <div class="modal-body" style="background: #969393;padding:5px;">
          <div class="x_panel" style="margin:0;padding: 0;">
            <div class="x_title pop-title" style="height: 5%;margin-bottom: 0;">
              <h5 style="">Authors:</h5>
            </div>
            <div class="x_content" style="padding: 0;">
                <div class="author-list" style="display: flex;justify-content: flex-start;flex-wrap: wrap;flex-direction: column;height: 700px;"></div>
            </div>
          </div>
            <div style="margin: 10px 0;display: flex;justify-content: center;">
                <button id="close">关闭</button>
            </div>
        </div>
      </div>
    </div>
    <div class="mark"></div>
    </div>
<!--底部-->
<div class="container" style="margin-top:10px;height: 50px;"></div>
<!--底部-->
<script src="{{ static_url('base/js/jquery.min.js') }}"></script>
<script src="{{ static_url('base/js/bootstrap.min.js') }}"></script>
<script src="{{ static_url('base/js/jquery.singlePageNav.min.js') }}"></script>
<script src="{{ static_url('base/js/wow.min.js') }}"></script>
<script src="{{ static_url('lazyload/jquery.lazyload.min.js') }}"></script>

{#<script>#}
{#    $(function() {#}
{#        new WOW().init();#}
{#    })#}
{##}
{#</script>#}
<script>
    var Area;
    var Author=null;
    function play(obj){
        var id = $(obj).attr('id');
        var url = "/play/"+id;
        var playlist = $('.playlist').attr('value');
        localStorage.setItem('playlist',playlist);
        window.open(url);
    }
    function del(obj){
        $.ajax({
            type: "GET",
            url: "/deleteMovie?id="+$(obj).parent().attr('id'),
            data: '',
            success:function(res){
                // console.log(res);
                if(res.code==0){
                    var rmdiv = $(obj).parent().parent();
                    rmdiv.remove();
                }
            }
        })
    }
    function saveList(data){
        var ids = [];
        for(var i in data){
            ids.push(data[i].id)
        }
        $('.playlist').attr('value',JSON.stringify(ids));
    }
    function videoDiv(video){
        var icon = video.ftype;
        var num = video.indexname.split(' ').length;
        if (icon=='m3u8'){
            icon = video.cuttype;
            if (icon==2){icon='cut'}else if(icon==3){icon='集'}else{icon=''}
            if(num>1){icon += '('+num+')'}
        }
        var logo = video.logo;
        if(logo!=''){logo='Images/'+logo}
        var div = '<div class="col-md-3 item" style="position: relative;">\
            <div class="movielist text-center" id="'+video.id+'" style="cursor: pointer;width: 100%;height: 100%;background-color: #292929;">\
               <div class="icon-del" onclick="del(this)"></div>\
                <img src="'+logo+'" style="min-width: 262px;min-height: 180px;width: 100%;background: aquamarine;" id="'+video.id+'" onclick="play(this)" class="img-responsive center-block" alt="">\
                <div style="display: flex;margin-top: 2px;">\
                    <div style="color: #ff9900;position: relative;text-align: left;border-radius: 2px;background: #1b6d85;padding-left: 2px;padding-right: 2px;">'+icon+'</div>\
                    <span title="'+video.name+'" style="cursor: auto;color:#999;font-style: italic;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;display: block;">'+video.name+'</span>\
                </div>\
                <span style="cursor: auto;color:#999;font-style: italic;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;display: block;float: left;color: bisque;">'+video.author+'</span><br>\
            </div>\
        </div>';
        return div;
    }
    function getvideos(area=0,author='',kwards=''){
        if(area==''){area=0}
        var query = '?area='+area+'&author='+author+'&kwards='+kwards;
        $.get('/getvideos'+query,function (res){
            res = JSON.parse(res);
            if(res.code==0){
                // 保存地区
                localStorage.setItem('area',res.data.area);
                // 保存当前筛选结果的列表ID
                saveList(res.data.list);
                // 设置顶部搜索的类型
                var area = res.data.area;
                $('input[name="area"]').attr('value',area);
                // 更新按钮的地区值
                var area = res.data.area;
                $('#sort-area').attr('value',area);
                // 加载列表
                $('.videolist').html('');
                for(var i in res.data.list){
                    var video = res.data.list[i];
                    var div = videoDiv(video);
                    $('.videolist').append(div);
                }
            }else{
                alert(res.msg);
            }
        })
    }
    function do_search(){
        var area = $('input[name="area"]',$('#search')).attr('value');
        var keywords = $('input[name="kwards"]',$('#search')).val();
        var convert = $('input[name="convert"]',$('#search')).attr('value');
        if(convert==1){ // 合并页搜索
            $('.convertlist').children().each(function (){
                if($(this).hasClass('media')){
                    var name = $('h4',this).text();
                    if(name.indexOf(keywords)==-1){
                        $(this).hide();
                    }else{
                        $(this).show();
                    }
                }
            })
        }else{
            getvideos(area=area,author='',kwards=keywords);
        }
        return false;
    }

    $(document).ready(function() {
        $("img.lazy").lazyload({
            effect: "fadeIn"
        });
        $("#do_m3u8").click(function () {
           var key = $("#m3u8_movie").val();
           var url = "/m3u8?url=" + key;
           window.open(url)
        });

        $(window).scroll(function() {
            var scroll = $(document).scrollTop();
            if(scroll<72){
                $('.navbar').css({"top":"-"+scroll+"px"});
            }
            if(scroll>72){
                $('.navbar').css({"top":"-72px"});
            }
        })
    });
</script>
{% block js %}{% end %}
</body>
</html>
